<template>
  <div class="login">
    <div class="box">
      <h3>欢迎登陆-MMALL管理系统</h3>
      <el-input placeholder="请输入账号" v-model="username" clearable>
      </el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
      <el-button type="primary" @click="btn">登录</el-button>
    </div>
  </div>
</template>

<script>
import { login } from "../http/index.js";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    //  登录按钮
    btn() {
      login({ username: this.username, password: this.password }).then(
        (res) => {
          console.log(res);
          if (res.data.status == 0) {
            this.$message({
              message: "登陆成功",
              type: "success",
            });
            this.$router.push('/index')
            ////设置账号过期
            //const obj = {
            //  data: this.registerUser.username,
            //  time: Date.now(),
            //  expire:1000*60*1 //单位是分钟
            //}
            //localStorage.setItem("admin", JSON.stringify(obj));
            //this.$router.push({
            //  name: "index",
            //  params: {
            //    user:this.registerUser.username
            //  }
            //})
          } else {
            this.$message.error('用户名或密码错误');
          }
        }
      );
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
//@import "@/scss/index.scss";
.login {
  width: 100%;
  height: 100vh;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 400px;
  height: 250px;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  h3,
  .el-input {
    margin-bottom: 15px;
  }
  .el-button {
    width: 100%;

    background-color: #337ab7;
  }
}
</style>
